<template>
  <div class="search">
    <div class="search__item">
      <div class="search__item-title">产品分类</div>
      <div class="search__item-list">
        <div class="list__item" @click="change('product_category',index)" :class="item.check?'active':''"
             v-for="(item,index) in info.info.product_category" :key="index">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="search__item">
      <div class="search__item-title">产品材质</div>
      <div class="search__item-list">
        <div class="list__item" @click="change('product_material',index)" :class="item.check?'active':''"
             v-for="(item,index) in info.info.product_material" :key="index">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="search__item">
      <div class="search__item-title">产品工艺</div>
      <div class="search__item-list">
        <div class="list__item" @click="change('product_technology',index)" :class="item.check?'active':''"
             v-for="(item,index) in info.info.product_technology" :key="index">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="search__item">
      <div class="search__item-title">材质纯度</div>
      <div class="search__item-list">
        <div class="list__item" @click="change('product_purity',index)" :class="item.check?'active':''"
             v-for="(item,index) in info.info.product_purity" :key="index">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="search__item">
      <div class="search__item-title">系列产品</div>
      <div class="search__item-list">
        <div class="list__item" @click="change('product_set',index)" :class="item.check?'active':''"
             v-for="(item,index) in info.info.product_set" :key="index">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="search__item">
      <div class="search__item-title">关键词</div>
      <div class="search__item-list">
        <van-field type="text" v-model="info.info.keywords" placeholder="请输入"/>
      </div>
    </div>
    <div class="footer__btn" @click="search">确定</div>
  </div>
</template>

<script setup>
import {onMounted, ref, defineProps} from "vue";
import {productCate} from "../../../../api/index.js";

import {useCounterStore} from "@/store/index"

defineProps(["search"])
const info = useCounterStore();

const change = (key, index) => {
  info.changeCheckByIndexAndKey({
    key, index
  })
}
onMounted(() => {
  console.log(info.info, "info");
  productCate().then(res => {
    const {product_category, product_material, product_purity, product_set, product_skn, product_technology} = res.data;
    const product_set_arr= Object.entries(product_set)
    info.change({
      product_category: product_category.map((ele,index) => ({name: ele, value: ele, check: false,key:"product_category",index:index})),
      product_material: product_material.map((ele,index) => ({name: ele, value: ele, check: false,key:"product_material",index:index})),
      product_purity: product_purity.map((ele,index) => ({name: ele, value: ele, check: false,key:"product_purity",index:index})),
      product_set: product_set_arr.map((ele,index) => ({name: ele[1], value:  ele[0], check: false,key:"product_set",index:index})),
      // product_skn: product_set.map((ele,index) => ({name: ele, value: ele, check: false,key:"product_skn",index:index})),
      product_technology: product_technology.map((ele,index) => ({name: ele, value: ele, check: false,key:"product_technology",index:index})),
    })
    // info.value = ;

  })
})

</script>

<style lang="less" scoped>
.search {
  position: relative;
  width: 375px;
  height: 559px;
  overflow-x: hidden;
  background: #FFFFFF;
  border-radius: 24px;
  padding-top: 26px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  padding-bottom: 70px;

  &__item {
    margin-bottom: 20px;

    &-title {
      font-size: 16px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #333333;
      margin-bottom: 16px;
    }

    &-list {
      display: flex;
      flex-wrap: wrap;

      .list {
        &__item {
          padding: 0px 14px;
          min-width: 73.75px;
          font-size: 12px;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #666666;
          text-align: center;
          height: 24px;
          line-height: 24px;
          background: #F1F1F1;

          &:not(&:nth-of-type(3n)) {
            margin-right: 16px;
          }

          border-radius: 12px;
          margin-bottom: 16px;

          &.active {
            background: #D5E6FF;
          }
        }
      }
    }
  }
}

.footer__btn {
  font-size: 18px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  line-height: 35px;
  width: 283px;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 33px;
  height: 35px;
  background: #639FF7;
  border-radius: 18px;
}
</style>
